import React from 'react';
import zhLocale from "date-fns/locale/zh-CN";
import DateFnsUtils from '@date-io/date-fns';
import { KeyboardTimePicker, KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import { loc, loc_lang, obj_str } from 'sui';

const get_loc = () => {
    if (loc_lang() === "zhcn") {
        return zhLocale;
    }

    return null;
};

const KTimeRange = ({ form }) => {
    if (!form.get("start")) {
        return null;
    }

    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={get_loc()}>
                <div className="mr-6">
                    <KeyboardTimePicker
                    label={loc("l_529")}
                    error={Boolean(form.err["start"])}
                    helperText={obj_str(form.err, "start")}
                    value={form.get("start", false)}
                    ampm={false}
                    inputVariant="outlined"
                    margin="normal"
                    id="start"
                    name="start"
                    cancelLabel={loc("l_227")}
                    okLabel={loc("l_541")}
                    clearable={false}
                    onChange={v => form.set("start", v)}/>
                </div>
                <div className="mr-6">
                    <KeyboardTimePicker
                    label={loc("l_528")}
                    error={Boolean(form.err["end"])}
                    helperText={obj_str(form.err, "end")}
                    value={form.get("end", false)}
                    ampm={false}
                    inputVariant="outlined"
                    margin="normal"
                    id="time-end"
                    name="time-end"
                    cancelLabel={loc("l_227")}
                    okLabel={loc("l_541")}
                    clearable={false}
                    onChange={v => form.set("end", v)}/>
                </div>
        </MuiPickersUtilsProvider>
    );
};

const KDateTime = ({ form, name, label, format="yyyy-MM-dd HH:mm", mg="normal" }) => {
    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={get_loc()}>
            <div className="mr-6">
                <KeyboardDateTimePicker
                format={format}
                label={label}
                error={Boolean(form.err[name])}
                helperText={obj_str(form.err, name)}
                value={form.get(name, false)}
                ampm={false}
                inputVariant="outlined"
                margin={mg}
                id={name}
                name={name}
                cancelLabel={loc("l_227")}
                okLabel={loc("l_541")}
                clearable={false}
                onChange={v => form.set(name, v)}/>
            </div>
        </MuiPickersUtilsProvider>
    );
};

export {KDateTime, KTimeRange};
